@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局样式设置 */
:root {
  --primary-color: #0d9488; /* 主色调：蓝绿色 */
  --primary-light: #14b8a6; /* 主色调亮色 */
  --primary-dark: #0f766e; /* 主色调暗色 */
  --secondary-color: #fbbf24; /* 辅助色：淡黄色 */
  --secondary-light: #fcd34d; /* 辅助色亮色 */
  --success-color: #10b981; /* 成功色 */
  --error-color: #ef4444; /* 错误/已预约色：红色 */
  --warning-color: #f59e0b; /* 警告色 */
  --info-color: #3b82f6; /* 信息色：蓝色系 */
  --bg-light: #f8fafc; /* 浅色背景 */
  --text-primary: #1e293b; /* 主要文本颜色 */
  --text-secondary: #64748b; /* 次要文本颜色 */
  --border-color: #e2e8f0; /* 边框颜色 */
}

/* 基础样式重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-light);
  color: var(--text-primary);
}

/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .transition-all-300 {
    transition: all 300ms ease-in-out;
  }
  .card-hover {
    @apply hover:shadow-lg transition-all duration-300 hover:-translate-y-1;
  }
  .btn-primary {
    @apply bg-teal-600 hover:bg-teal-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg;
  }
  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
  }
  .btn-disabled {
    @apply bg-gray-300 text-gray-500 cursor-not-allowed font-medium py-2 px-4 rounded-lg;
  }
  .input-field {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-colors;
  }
  .input-error {
    @apply border-red-300 focus:ring-red-500;
  }
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* 加载动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

/* 日历样式增强 */
.calendar-container button {
  position: relative;
}

/* 时间段选择增强 */
.time-slots-container button {
  transition: all 0.3s ease;
}

.time-slots-container button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 响应式设计调整 */
@media (max-width: 640px) {
  .time-slots-container .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .calendar-container .grid-cols-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .calendar-container button {
    min-height: 40px;
    padding: 0;
  }
}

/* 无障碍支持 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .calendar-container button,
  .time-slots-container button {
    border-width: 2px;
  }
}